<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
	<th:block th:include="include :: header('商城中心')" />
	<link href="../static/ajax/libs/layui/css/layui.css" th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet" />
	<link href="../static/ajax/libs/layui/css/admin.css" th:href="@{/ajax/libs/layui/css/admin.css}" rel="stylesheet" />
	<style>
		/** 应用快捷块样式 */
		.console-app-group {
			padding: 16px;
			border-radius: 4px;
			text-align: center;
			background-color: #fff;
			cursor: pointer;
			display: block;
		}

		.console-app-group .console-app-icon {
			width: 32px;
			height: 32px;
			line-height: 32px;
			margin-bottom: 6px;
			display: inline-block;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			font-size: 32px;
			color: #69c0ff;
		}

		.console-app-group:hover {
			box-shadow: 0 0 15px rgba(0, 0, 0, .08);
		}

		/** //应用快捷块样式 */

		/** 小组成员 */
		.console-user-group {
			position: relative;
			padding: 10px 0 10px 60px;
		}

		.console-user-group .console-user-group-head {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 50%;
			left: 12px;
			margin-top: -16px;
			border-radius: 50%;
		}

		.console-user-group .layui-badge {
			position: absolute;
			top: 50%;
			right: 8px;
			margin-top: -10px;
		}

		.console-user-group .console-user-group-name {
			line-height: 1.2;
		}

		.console-user-group .console-user-group-desc {
			color: #8c8c8c;
			line-height: 1;
			font-size: 12px;
			margin-top: 5px;
		}

		/** 卡片轮播图样式 */
		.admin-carousel .layui-carousel-ind {
			position: absolute;
			top: -41px;
			text-align: right;
		}

		.admin-carousel .layui-carousel-ind ul {
			background: 0 0;
		}

		.admin-carousel .layui-carousel-ind li {
			background-color: #e2e2e2;
		}

		.admin-carousel .layui-carousel-ind li.layui-this {
			background-color: #999;
		}

		/** 广告位轮播图 */
		.admin-news .layui-carousel-ind {
			height: 45px;
		}

		.admin-news a {
			display: block;
			line-height: 70px;
			text-align: center;
		}

		/** 最新动态时间线 */
		.layui-timeline-dynamic .layui-timeline-item {
			padding-bottom: 0;
		}

		.layui-timeline-dynamic .layui-timeline-item:before {
			top: 16px;
		}

		.layui-timeline-dynamic .layui-timeline-axis {
			width: 9px;
			height: 9px;
			left: 1px;
			top: 7px;
			background-color: #cbd0db;
		}

		.layui-timeline-dynamic .layui-timeline-axis.active {
			background-color: #0c64eb;
			box-shadow: 0 0 0 2px rgba(12, 100, 235, .3);
		}

		.dynamic-card-body {
			box-sizing: border-box;
			overflow: hidden;
		}

		.dynamic-card-body:hover {
			overflow-y: auto;
			padding-right: 9px;
		}

		/** 优先级徽章 */
		.layui-badge-priority {
			border-radius: 50%;
			width: 20px;
			height: 20px;
			padding: 0;
			line-height: 18px;
			border-width: 2px;
			font-weight: 600;
		}
	</style>
</head>

<body>
	<!-- 正文开始 -->
	<div class="layui-fluid ew-console-wrapper">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						销售额<span class="layui-badge layui-badge-blue pull-right">当日</span>
					</div>
					<div class="layui-card-body">
						<p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span><span
								id="todayAmount">0</span></p>
						<p>总销售额<span class="pull-right" id="totalAmount">0</span></p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						订单量<span class="layui-badge layui-badge-green pull-right">当日</span>
					</div>
					<div class="layui-card-body">
						<p class="lay-big-font" id="todayCnt">0</p>
						<p>总订单量<span class="pull-right" id="totalCnt"></span></p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						访问量<span class="layui-badge layui-badge-yellow pull-right">当日</span>
					</div>
					<div class="layui-card-body">
						<p class="lay-big-font" id="todayVisits">0</p>
						<p>总访问量<span class="pull-right" id="totalVisits">0</span></p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-header">
						新增用户<span class="layui-badge layui-badge-red pull-right">当日</span>
					</div>
					<div class="layui-card-body">
						<p class="lay-big-font"><span id="todayMembers"></span> <span style="font-size: 24px;line-height: 1;">位</span></p>
						<p>总用户量<span class="pull-right"><span id="totalMembers"></span>个</span></p>
					</div>
				</div>
			</div>
		</div>
		<!-- 快捷方式 -->
		<div class="layui-row layui-col-space15">
			<div class="layui-col-sm6" style="padding-bottom: 0;">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs6 layui-col-sm3" onclick="openTab('会员列表','/shop/member')">
						<div class="console-app-group" ew-href="page/system/user.html" ew-title="用户管理">
							<i class="console-app-icon layui-icon layui-icon-group"
								style="font-size: 26px;padding-top: 3px;margin-right: 6px;"></i>
							<div class="console-app-name">会员</div>
						</div>
					</div>
					<div class="layui-col-xs6 layui-col-sm3" onclick="openTab('用户管理','/system/user')">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-set"
								style="font-size: 26px;padding-top: 3px;color: #ff85c0;"></i>
							<div class="console-app-name">系统</div>
						</div>
					</div>
					<div class="layui-col-xs6 layui-col-sm3" onclick="openTab('商品列表','/shop/goods')">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-gift"
								style="color: #ff9c6e;padding-top: 2px;font-size: 32px;"></i>
							<div class="console-app-name">商品</div>
						</div>
					</div>
					<div class="layui-col-xs6 layui-col-sm3" onclick="openTab('订单列表','/shop/trade/order')">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-form"
								style="color: #b37feb;font-size: 28px;"></i>
							<div class="console-app-name">订单</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-sm6" style="padding-bottom: 0;">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs6 layui-col-sm3" onclick="openTab('地区管理','/shop/region')">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-util"
								style="font-size: 30px;color: #ffc069;"></i>
							<div class="console-app-name">配置</div>
						</div>
					</div>
					<div class="layui-col-xs6 layui-col-sm3" onclick="openTab('文章管理','/shop/cms/article')">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-layer"
								style="color: #ffd666;font-size: 32px;"></i>
							<div class="console-app-name">文章</div>
						</div>
					</div>

					<div class="layui-col-xs6 layui-col-sm3">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-email"
								style="color: #5cdbd3;font-size: 32px;"></i>
							<div class="console-app-name">消息</div>
						</div>
					</div>
					<div class="layui-col-xs6 layui-col-sm3">
						<div class="console-app-group">
							<i class="console-app-icon layui-icon layui-icon-chart" style="color: #95de64;"></i>
							<div class="console-app-name">报表</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-row layui-col-space15">
			<div class="layui-col-md8 layui-col-sm6">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">商品排行</div>
							<div class="layui-card-body dynamic-card-body" style="height: 265px;">
								<table class="layui-table" lay-skin="line">
									<colgroup>
										<col width="80" />
										<col />
										<col width="80" />
									</colgroup>
									<thead>
										<tr>
											<td align="center">排名</td>
											<td>商品名称</td>
											<td align="center">销量</td>
										</tr>
									</thead>
									<tbody>
										<tr th:each="goods,goodsStat: ${topGoods}">
											<td align="center">
												<span class="layui-badge layui-badge-priority layui-badge-red"
													th:if="${goodsStat.index==0}">[[${goodsStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-yellow"
													th:if="${goodsStat.index==1}">[[${goodsStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-green"
													th:if="${goodsStat.index==2}">[[${goodsStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-blue"
													th:if="${goodsStat.index==3}">[[${goodsStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-blue"
													th:if="${goodsStat.index==4}">[[${goodsStat.index+1}]]</span>
											</td>
											<td><span class="layui-text"><a>[[${goods.goodsName}]]</a></span></td>
											<td align="center">[[${goods.sales}]]</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">会员排行</div>
							<div class="layui-card-body dynamic-card-body" style="height: 265px;">
								<table class="layui-table" lay-skin="line">
									<colgroup>
										<col width="80" />
										<col />
										<col width="100" />
									</colgroup>
									<thead>
										<tr>
											<td align="center">排名</td>
											<td>会员昵称</td>
											<td align="center">登录次数</td>
										</tr>
									</thead>
									<tbody>
										<tr th:each="login,loginStat: ${topLogins}">
											<td align="center">
												<span class="layui-badge layui-badge-priority layui-badge-red"
													th:if="${loginStat.index==0}">[[${loginStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-yellow"
													th:if="${loginStat.index==1}">[[${loginStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-green"
													th:if="${loginStat.index==2}">[[${loginStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-blue"
													th:if="${loginStat.index==3}">[[${loginStat.index+1}]]</span>
												<span class="layui-badge layui-badge-priority layui-badge-blue"
													th:if="${loginStat.index==4}">[[${loginStat.index+1}]]</span>
											</td>
											<td><span class="layui-text"><a>[[${login.loginName}]]</a></span></td>
											<td align="center"><span class="text-primary">[[${login.loginCount}]]</span>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-header">销量统计</div>
							<div class="layui-card-body">
								<div class="echarts" id="trade-chart"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md4 layui-col-sm6">
				<div class="layui-card">
					<div class="layui-card-header">版本信息</div>
					<div class="layui-card-body">
						<table class="layui-table layui-text">
							<colgroup>
								<col width="100">
								<col>
							</colgroup>
							<tbody>
								<tr>
									<td>产品名称</td>
									<td id="productName">favorshop</td>
								</tr>
								<tr>
									<td>当前版本</td>
									<td id="currentVersion">1.0.0</td>
								</tr>
								<tr>
									<td>若依版本</td>
									<td id="ruoyiVersion"></td>
								</tr>
								<tr>
									<td>java版本</td>
									<td id="javaVersion"></td>
								</tr>
								<tr>
									<td>mysql版本</td>
									<td id="dbVersion"></td>
								</tr>
								<tr>
									<td>技术支持</td>
									<td>
										<a href="http://ruoyi.vip" target="_blank"
											class="layui-btn layui-btn-sm layui-btn-normal">操作手册</a>
										<a href="https://doc.ruoyi.vip/" target="_blank"
											class="layui-btn layui-btn-sm layui-btn-normal">开发手册</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="layui-card">
					<div class="layui-card-header">消费统计</div>
					<div class="layui-card-body">
						<div class="echarts" id="buy-chart"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: echarts-js" />
	<script th:inline="javascript" type="text/javascript">
		var ctx = [[@{/}]];
		var prefix = ctx + "shop/main";
		$.ajax({
			url: prefix + "/data",
			type: "get",
			success: function (res) {
				//顶部汇总数据
				loadTotalData(res.data.total);
				//版本信息
				loadVersionInfo(res.data.version)
				//月订单销量图表
				loadOrderChart(res.data.orders);
				//用户消费图表
				loadBuyChart(res.data.buys);
			}
		})
		//平台统计
		function loadTotalData(total) {
			$("#todayAmount").text(total.todayAmount)
			$("#totalAmount").text(total.totalAmount)
			$("#todayCnt").text(total.todayCnt)
			$("#totalCnt").text(total.totalCnt)
			$("#todayVisits").text(total.todayVisits)
			$("#totalVisits").text(total.totalVisits)
			$("#todayMembers").text(total.todayMembers)
			$("#totalMembers").text(total.totalMembers)
		}
		//版本信息
		function loadVersionInfo(version) {
			$("#productName").text(version.productName)
			$("#currentVersion").text(version.currentVersion)
			$("#ruoyiVersion").text(version.ruoyiVersion)
			$("#javaVersion").text(version.javaVersion)
			$("#dbVersion").text(version.dbVersion)
		}
		//销量图表
		function loadOrderChart(orders) {
			var months = orders.months;
			var amounts = orders.amounts;
			var counts = orders.counts;
			var barChart = echarts.init(document.getElementById("trade-chart"));
			var baroption = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['销售额', '订单数']
				},
				grid: {
					x: 30,
					x2: 40,
					y2: 24
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: months
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '销售额',
						type: 'bar',
						barWidth: '40%', // 设置为类目宽度的50%
						data: amounts,
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},
						markLine: {
							data: [
								{type: 'average', name: '平均值'}
							]
						}
					},
					{
						name: '订单数',
						type: 'line',
						data: counts,
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},
						markLine: {
							data: [
								{type: 'average', name: '平均值'}
							]
						}
					}
				]
			};
			barChart.setOption(baroption);
			window.onresize = barChart.resize;
		}
		//用户消费图表
		function loadBuyChart(buys) {
			var titles = buys.titles;
			var datas = buys.datas;
			var pieChart = echarts.init(document.getElementById("buy-chart"));
			var pieoption = {
				title: {
					x: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: titles
				},
				calculable: true,
				series: [
					{
						name: '消费次数',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: datas
					}
				]
			};
			pieChart.setOption(pieoption);
			$(window).resize(pieChart.resize);
		}

		function openTab(title, url) {
			$.modal.openTab(title, url);
		}
	</script>
</body>

</html>